<template>
  <div>
    <div class="focus-icon" v-if="isFollow === 1" @click="changepic">
      <span class="jia">+</span><span class="focus">关注</span>
    </div>
    <div class="focus-icon-do" v-if="isFollow === 2"   @click="changepiced">
      <span class="dofocus">已关注</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "focus",
      data(){
        return{
          isFollow:this.fans.isFollow
        }
      },
      props:['fans'],
      methods:{
        changepic(){
          this.isFollow=false
        },
        changepiced(){
          this.isFollow=true
        }
      },
    }
</script>

<style scoped>
  .focus-icon{
    width: 3.93rem;
    height: 1.93rem;
    border: 1px solid #AD2532;
    border-radius: 0.285rem;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .focus-icon-do{
    width: 3.93rem;
    height: 1.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9B9B9B;
    border-radius: 0.285rem;
  }
  .focus{
    font-size: 12px;
    color: #AD2532;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .dofocus{
    font-size: 12px;
    color: #848484;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .jia{
    font-size: 20px;
    color: #AD2532;
    text-align: justify;
    display: block;
    height: .22rem;
    line-height: .1rem;
  }
</style>
